{extend name="base" /}

{block name="logo"}
<div style="height:50px;float:left;margin-left:20px;font-size:0;">
    <img style="height:100%;" src="/static/images/logo.png" alt="">
</div>
<img style="height:70%;font-size:0;" src="/static/images/sck.png" alt="">
{/block}

{block name="body"}
<div style="margin-top:5px;">
    <img src="/static/images/banner.jpg" alt="">
</div>
<div id="masonry" class="container-fluid">
    {foreach name="$list" item="vo"}
    <div class="box">
        <img style="width:100%;" src="{$vo}" alt="">
    </div>
    {/foreach}
</div>
{/block}

{block name="script"}
<script>
    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.box',
                gutter: 17,
                isAnimated: true,
                isFitWidth: true,
            });
        });
    });
</script>
{/block}